<template>
	<view class="container" :style="{backgroundImage:'url('+mai_lun_bg+')'}"
		style="background-size: cover;background-position: center top;overflow: hidden;" v-if="detail">
		<!-- <view class="month-title flex-cc">{{detail.currentMonth}}月</view> -->
		<image :src="left_hd" mode="" class="left-hd"></image>
		<image :src="right_hd" mode="" class="right-hd"></image>
		<view class="bottom-btn">
			<image :src="ml_go_test" mode="" @click="goTest"></image>
			<!-- <view class="bb-tip" v-if="detail.lastMonthIsScl=='Y'">上月测算已经过期</view> -->
		</view>
	</view>
</template>

<script>
	import {
		chakraSclInfo
	} from '@/common/api/scl_api.js'
	export default {
		data() {
			return {
				left_hd: this.$imgWxkjUrl + '/product/left_hd.png',
				right_hd: this.$imgWxkjUrl + '/product/right_hd.png',
				ml_look_result: this.$imgWxkjUrl + '/product/ml_look_result.png',
				mai_lun_bg: this.$imgWxkjUrl + '/product/mai_lun_bg_new_new.png',
				ml_go_test: this.$imgWxkjUrl + '/product/ml_go_test_new.png',
				detail: null
			}
		},
		created() {
			chakraSclInfo().then(res => {
				this.detail = res.data.data
			})
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		beforeDestroy() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			goTest() {
				// if (this.detail.reportId) {
				// 	uni.navigateTo({
				// 		url: '/subcontractorB/pages/sclResult/sclResult?id=' + this.detail.reportId
				// 	})
				// } else {

				// }
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/introduce/introduce?sclId=' + this.detail.sclId +
						'&merchandiseId=' + this.detail.merchandiseId
				})
			}
		}
	}
</script>

<style scoped>
	.left-hd {
		width: 220rpx;
		height: 240rpx;
		position: absolute;
		left: -20rpx;
		top: 734rpx;
		display: block;
		animation: flap2 1.3s ease-in-out infinite alternate;
		transform-origin: center;
	}

	.right-hd {
		width: 240rpx;
		height: 300rpx;
		position: absolute;
		right: -20rpx;
		top: 548rpx;
		display: block;
		animation: flap 0.8s ease-in-out infinite alternate;
		transform-origin: center;
	}


	@keyframes flap {
		0% {
			transform: rotateY(0deg) scale(1);
		}

		100% {
			transform: rotateY(30deg) scale(1.05);
		}
	}
	@keyframes flap2 {
		0% {
			transform: rotateY(0deg) scale(1);
		}
	
		100% {
			transform: rotateY(-30deg) scale(1.05);
		}
	}

	.month-title {
		width: 284rpx;
		height: 94rpx;
		background: linear-gradient(90deg, rgba(38, 32, 82, 0) 0%, rgba(26, 67, 163, 0.75) 49%, rgba(71, 62, 133, 0) 100%);
		font-weight: bold;
		font-size: 70rpx;
		color: #FFFFFF;
		letter-spacing: 6rpx;
		position: absolute;
		top: 567rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bb-tip {
		width: 100%;
		font-size: 28rpx;
		color: #7DF7E5;
		text-align: center;
		margin-top: -20rpx;
	}

	.bottom-btn {
		position: absolute;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bottom-btn image {
		width: 520rpx;
		height: 230rpx;
	}
</style>